<template>
  <div id="buyCardRecord">
    <group>
      <datetime title="开始日期" v-model="beginTime" end-date="" format="YYYY-MM-DD"></datetime>
      <datetime title="结束日期" v-model="endTime" format="YYYY-MM-DD"></datetime>
      <agent-button @btnClick="searchClick">查询</agent-button>
    </group>
    <div class="table_box">
      <div class="form-preview" v-for="(list,index) in lists" :key="index">
        <div class="form-preview__hd">
          <label class="form-preview__label">付款金额</label>
          <em class="form-preview__value">¥{{list.goods_price}}</em>
        </div>
        <div class="form-preview__bd">
          <div class="form-preview__item">
            <label class="form-preview__label">购买时间：</label>
            <span class="form-preview__value">{{list.add_time}}</span>
          </div>
          <div class="form-preview__item">
            <label class="form-preview__label">商品名称:</label>
            <span class="form-preview__value">{{list.goods_name}}</span>
          </div>
          <div class="form-preview__item">
            <label class="form-preview__label">奖励卡数:</label>
            <span class="form-preview__value">{{list.cardnum}}</span>
          </div>
          <div class="form-preview__item">
            <label class="form-preview__label">购卡类型:</label>
            <span class="form-preview__value">{{list.order_status}}</span>
          </div>
          <div class="form-preview__item">
            <label class="form-preview__label">订单状态:</label>
            <span :class="{'red':list.pay_status=='未付款','green':list.pay_status=='已完成'}" class="form-preview__value">{{list.pay_status}}</span>
          </div>
          <div class="form-preview__item" v-if="list.pay_name">
            <label class="form-preview__label">支付方式:</label>
            <span class="form-preview__value">{{list.pay_name}}</span>
          </div>
        </div>
        <div class="form-preview__ft"></div>
      </div>
    </div>
    <div class="table_btn">
      <button @click="getUpPage()">上一页</button>
      <button @click="nextPage()">下一页</button>
    </div>
  </div>
</template>
<script>
import { Datetime, Group, dateFormat, FormPreview } from "vux";
import AgentButton from "../../../components/common/AgentButton.vue";
export default {
  data() {
    return {
      lists: [],
      beginTime: dateFormat(new Date(), "YYYY-MM-DD"),
      endTime: dateFormat(new Date(), "YYYY-MM-DD"),
      pagesize: 10, //每页显示条数
      page: 1, //当前页码
      maxPage: 0 //最大页数
    };
  },
  filters: {
    dateFormat
  },
  components: {
    Datetime,
    Group,
    AgentButton
  },
  created() {
    //获取代理等级二级代理不能给下级代理发卡
    this.getBuyCardRecord(this.pagesize, this.page);
  },
  methods: {
    getBuyCardRecord(pagesize, page) {
      this.apiService.user
        .purchaseorderlist({
          starttime: this.beginTime,
          endtime: this.endTime,
          pagesize: pagesize,
          currentpage: page
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.lists = res.data.purchaseorderlist;
          this.lists.map(item => {
            item["add_time"] = dateFormat(
              new Date(item["add_time"] * 1000),
              "YYYY-MM-DD hh:mm:ss"
            );
            //发卡类型
            if (item.order_status == 1) item.order_status = "奖励发卡";
            else if (item.order_status == 2) item.order_status = "自助购卡";
            else item.order_status = "联系客服购卡";
            //订单状态
            item.pay_status = item.pay_status == 1 ? "未付款" : "已完成";
          });
        });
    },
    searchClick() {
      this.getBuyCardRecord(this.pagesize, this.page);
    },
    //上一页
    getUpPage() {
      if (this.page > 1) {
        this.page--;
        this.getBuyCardRecord(this.pagesize, this.page);
      }
    },
    //下一页
    nextPage() {
      if (this.page < this.maxPage && this.maxPage != 0) {
        this.page++;
        this.getBuyCardRecord(this.pagesize, this.page);
      }
    }
  }
};
</script>

<style scoped>
#buyCardRecord .red {
  color: #f00;
}
#buyCardRecord .green {
  color: #0f0;
}
.table_box .form-preview {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  margin-top: 0.2rem;
}
.form-preview:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  border-top: 1px solid #d9d9d9;
  color: #d9d9d9;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.form-preview:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #d9d9d9;
  color: #d9d9d9;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.form-preview .form-preview__hd {
  position: relative;
  padding: 10px 15px;
  text-align: right;
  line-height: 2.5em;
}
.form-preview__hd:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #d9d9d9;
  color: #d9d9d9;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  left: 15px;
}
.form-preview__label {
  float: left;
  margin-right: 1em;
  min-width: 4em;
  color: #999999;
  text-align: justify;
  text-align-last: justify;
}
.form-preview__hd .form-preview__value {
  font-style: normal;
  font-size: 1.6em;
}

.form-preview__value {
  display: block;
  overflow: hidden;
  word-break: normal;
  word-wrap: break-word;
}

.form-preview__bd {
  padding: 10px 15px;
  font-size: 0.9em;
  text-align: right;
  line-height: 2;
}
.form-preview__item {
  overflow: hidden;
}
.form-preview__ft {
  position: relative;
  line-height: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.form-preview__ft:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  border-top: 1px solid #d5d5d6;
  color: #d5d5d6;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.table_btn {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.4rem 0;
}
.table_btn button {
  color: #0085e7;
  font-size: 0.32rem;
}
</style>
